<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ATP - AI Travel Poster</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="logo">
                    <img src="assets/logo.jpg" alt="ATP Logo" class="logo-image">
                    <span class="logo-text">ATP</span>
                </div>
                <a href="blog.html" class="nav-link">Blog</a>
                <a href="test_poster/index.html" class="nav-link">Templates Preview</a>
            </div>
            <div class="nav-right">
                <button class="btn btn-primary">Join Waitlist</button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <header id="hero">        
        <div class="hero-content">
            <div class="hero-text">
                <h1>Turn your day into a share-worthy AI Poster.</h1>
                <p>Automatically transform your travel photos, locations, and thoughts into shareable posters.</p>
            </div>
            <div class="hero-image">
                <img src="assets/hero.png" alt="ATP App Mockup" />
            </div>
        </div>
    </header>

    <!-- Features Section -->
    <section id="features">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📸</div>
                    <h3>Auto-Capture Moments</h3>
                    <p>Automatically capture your wonderful moments without manual recording</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">✨</div>
                    <h3>AI-Generated Captions</h3>
                    <p>Intelligently generate personalized captions, making each poster unique</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🚀</div>
                    <h3>One-Tap Share</h3>
                    <p>Share to social platforms with one tap, showcase your travel stories</p>
                </div>
            </div>
            <div class="features-cta">
                <a href="test_poster/index.html" class="btn btn-secondary">Templates Preview</a>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works">
        <div class="container">
            <div class="how-it-works-header">
                <h2>How ATP Works</h2>
                <p>Transform your travel moments into stunning posters in just 4 simple steps</p>
            </div>
            <div class="workflow-container">
                <div class="workflow-step" data-step="1">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <div class="step-icon">📱</div>
                        <h3>Capture with Native Camera</h3>
                        <p>Take photos using your phone's built-in camera app - no need to import or upload anything</p>
                    </div>
                </div>
                
                <div class="workflow-arrow">
                    <svg width="60" height="24" viewBox="0 0 60 24" fill="none">
                        <path d="M2 12H58M58 12L48 2M58 12L48 22" stroke="#786CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                
                <div class="workflow-step" data-step="2">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <div class="step-icon">🧠</div>
                        <h3>AI Auto-Analysis</h3>
                        <p>System automatically extracts photo info (time, location) and generates relevant content with mood tags</p>
                    </div>
                </div>
                
                <div class="workflow-arrow">
                    <svg width="60" height="24" viewBox="0 0 60 24" fill="none">
                        <path d="M2 12H58M58 12L48 2M58 12L48 22" stroke="#786CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                
                <div class="workflow-step" data-step="3">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <div class="step-icon">🎨</div>
                        <h3>Smart Poster Generation</h3>
                        <p>Set daily poster generation time, get reminded, choose from templates, and create shareable posters</p>
                    </div>
                </div>
                
                <div class="workflow-arrow">
                    <svg width="60" height="24" viewBox="0 0 60 24" fill="none">
                        <path d="M2 12H58M58 12L48 2M58 12L48 22" stroke="#786CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                
                <div class="workflow-step" data-step="4">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <div class="step-icon">🌟</div>
                        <h3>Share Your Joy</h3>
                        <p>Publish to social media platforms like Instagram, WeChat, Twitter and share your travel joy with friends</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Daily Poster Section -->
    <section id="daily-poster">
        <div class="container">
            <div class="poster-content">
                <div class="poster-text">
                    <h2>Every day is a unique poster</h2>
                    <p>Let AI help you record the beautiful moments in life</p>
                    <button class="btn btn-secondary" id="see-sample">See more</button>
                </div>
                <div class="poster-image">
                    <img src="assets/poster.png" alt="Sample Poster" />
                </div>
            </div>
        </div>
    </section>

    <!-- Social Proof Section -->
    <section id="social-proof">
        <div class="container">
            <div class="testimonials">
                <blockquote class="testimonial active">
                    <div class="testimonial-content">
                        <p>💝 "ATP makes travel journaling so effortless and beautiful, friends keep asking what app I'm using!"</p>
                        <cite>— Sarah Chen, Travel Blogger ✈️</cite>
                    </div>
                </blockquote>
                <blockquote class="testimonial">
                    <div class="testimonial-content">
                        <p>🎨 "Every AI-generated poster looks professionally designed, perfectly capturing my travel emotions."</p>
                        <cite>— Mike Wang, Photographer 📸</cite>
                    </div>
                </blockquote>
                <blockquote class="testimonial">
                    <div class="testimonial-content">
                        <p>⏰ "Finally no more time spent organizing photos—ATP automatically creates the best travel memories for me."</p>
                        <cite>— Lisa Zhang, Product Manager 💼</cite>
                    </div>
                </blockquote>
            </div>
        </div>
    </section>

    <!-- Waitlist Section -->
    <section id="waitlist">
        <div class="container">
            <div class="waitlist-card">
                <h2>Join the private beta</h2>
                <p>Be among the first to experience ATP and enjoy exclusive features</p>
                <form id="waitlist-form" class="waitlist-form" name="waitlist" method="POST" data-netlify="true">
                    <input type="hidden" name="form-name" value="waitlist" />
                    <input type="email" name="email" placeholder="Enter your email address" required />
                    <button type="submit" class="btn btn-primary">Join Waitlist</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-left">
                    <span>© 2025 ATP</span>
                </div>
                <div class="footer-right">
                    <a href="https://x.com/AI_Travel_Post" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Follow us on X (Twitter)">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="https://mp.weixin.qq.com/s/jtklzDQKNC_FR9sc8_PiDQ" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Follow us on WeChat">
                        <i class="fab fa-weixin"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Modal -->
    <div id="sample-modal" class="modal">
        <div class="modal-content-gallery">
            <span class="close">&times;</span>
            <div class="gallery-header">
                <h3>Poster Gallery</h3>
                <p>Beautiful travel posters generated by AI</p>
            </div>
            <div class="poster-gallery">
                <div class="poster-item">
                    <img src="assets/poster.png" alt="Virtual Tour of Beijing Poster" />
                    <div class="poster-caption">
                        <h4>Virtual Tour of Beijing</h4>
                        <p>Explore the serene sunset at the Temple of Heaven</p>
                    </div>
                </div>
                <div class="poster-item">
                    <img src="assets/city_explorer.png" alt="City Explorer Poster" />
                    <div class="poster-caption">
                        <h4>City Explorer</h4>
                        <p>Vibrant moments of modern urban life</p>
                    </div>
                </div>
                <div class="poster-item">
                    <img src="assets/nature.png" alt="Nature Escape Poster" />
                    <div class="poster-caption">
                        <h4>Nature Escape</h4>
                        <p>Poetic moments between mountains and waters</p>
                    </div>
                </div>
                <div class="poster-item">
                    <img src="assets/culinary.png" alt="Culinary Journey Poster" />
                    <div class="poster-caption">
                        <h4>Culinary Journey</h4>
                        <p>Cultural experiences on the tip of your tongue</p>
                    </div>
                </div>
                <div class="poster-item">
                    <img src="assets/art.png" alt="Art & Culture Poster" />
                    <div class="poster-caption">
                        <h4>Art & Culture</h4>
                        <p>Perfect fusion of tradition and modernity</p>
                    </div>
                </div>
                <div class="poster-item">
                    <img src="assets/night.png" alt="Night Walk Poster" />
                    <div class="poster-caption">
                        <h4>Night Walk</h4>
                        <p>City stories under neon lights</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html> 